<template>
	<view class="hotelAll">
		<view class="order-title">
			<fui-nav-bar background="rgba(0,0,0,0)" :isFixed="true" :title="hotelTitle" @leftClick="leftClick">
				<fui-icon name="arrowleft" color='#fff'></fui-icon>
				<text>订单号 {{orderInfo.number}}</text>
			</fui-nav-bar>
		</view>
		<view class="imgAll">
			<view class="kong">
				<view class="img-head marin25 padding25">
					<!-- <template>
						<fui-icon name="wait" :size="48" color='#fff'></fui-icon>
						<text class="wait-queren">等待酒店确认</text>
						<view class="wait-text">
							预计几个小时内，短信告知您预订结果
						</view>
					</template> -->
					<template v-if="orderInfo.zt== 6 ">
						<fui-icon  name="checkbox" :size="60" color='#fff'></fui-icon>
						<text class="wait-queren">预定成功</text>
						<view class="wait-text">
							{{startT}}  14:00以后办理入住
						</view>
					</template>
				<!-- 	<template v-if="orderInfo.zt== 2 ">
						<fui-icon  name="checkbox" :size="60" color='#fff'></fui-icon>
						<text class="wait-queren">已取消</text>
						<view class="wait-text">
							9月27日14:00以后办理入住
						</view>
					</template> -->
					<template v-if="orderInfo.zt== 2 ">
						<view class="wait-queren1">
							<view class="w-q1">
								<fui-icon name="checkbox" :size="60" color='#fff'></fui-icon>
								<text>已取消</text>
							</view> 
							<view class="wait-shi1" @click="goTui">退款进度	<fui-icon name="arrowright" :size="48" color='#fff'></fui-icon></view>
						</view>
						<view class="wait-text">
							{{startT}}  14:00以后办理入住
						</view>
					</template>
					<template v-if="orderInfo.zt== 0 ">
						<view class="wait-queren1">
							<view class="w-q1">
								<fui-icon name="checkbox" :size="60" color='#fff'></fui-icon>
								<text>待支付</text>
							</view>
							<text class="wait-shi">
								<!-- 29:00:00 -->
								{{orderInfo.cancelTime}}
							</text>
						</view>
						<view class="wait-text">
							超时后，订单将自动取消
						</view>
					</template>
				</view>
				<!-- 按钮 -->
				<view class="two-btnstate" v-if="orderInfo.zt==0 ">
					<!-- <fui-button text="删除订单" :margin="['0', '17rpx']" radius='46rpx' width='220rpx' size="26" :plain='true' borderColor='#FFF'
					 height='52rpx' @click='deleteShowModal'></fui-button> -->
					 
				<!-- 	<fui-button text="申请退款" :margin="['0', '17rpx']" radius='46rpx' width='220rpx' size="26" :plain='true' borderColor='#FFF'
					 height='52rpx' @click='cancelPage'></fui-button> -->
					 
					<fui-button text="付款" :margin="['0', '17rpx']" radius='46rpx' width='220rpx' size="26" color="#35743D" background="#fff"
					 borderColor='#FFF' height='52rpx' @click='againPay(orderInfo.number)'></fui-button>
				</view>
				
				<view class="btn-state" v-if="orderInfo.zt==1">
					<fui-button text="申请退款" :margin="['0', '17rpx']" radius='46rpx' size="26" width='320rpx' :plain='true' borderColor='#FFF'
					 height='72rpx'  @click='cancelPage'></fui-button>
				</view>
				
				<view class="btn-state" v-if="orderInfo.zt==2">
				<!-- <fui-button text="删除订单" :margin="['0', '17rpx']" radius='46rpx' size="26" width='320rpx' :plain='true' borderColor='#FFF'
				 height='72rpx'></fui-button> -->
				 </view>
				 
				<view class="one-btnstate" v-if="orderInfo.zt==6">
					<fui-button text="申请退款" :margin="['0', '17rpx']" radius='46rpx' size="26" width='320rpx' :plain='true' borderColor='#FFF'
					 height='72rpx' @click='cancelPage'></fui-button>
					<!-- <fui-button text="预订凭证" :margin="['0', '17rpx']" radius='46rpx' size="26" width='320rpx' color="#35743D"
					 background="#fff" borderColor='#FFF' height='72rpx' @click='goBookVoucher'></fui-button> -->
				</view>
				<!--  砍掉<view class="one-btnstate">
					<fui-button text="删除订单" :margin="['0', '17rpx']" radius='46rpx' size="26" width='320rpx' :plain='true' borderColor='#FFF'
					 height='72rpx'></fui-button>
					<fui-button text="再次预订" :margin="['0', '17rpx']" radius='46rpx' size="26" width='320rpx' color="#35743D"
					 background="#fff" borderColor='#FFF' height='72rpx'></fui-button>
				</view> -->
				<!-- 确认删除吗 -->
				<fui-modal :buttons="buttons" radius='46' :show="deleteShow" :descr="descr" descrColor="#1D1D1D" maskClosable
				 @click="deleteOnClick" @cancel="deleteOnCancel"></fui-modal>

				<!-- 取消规则 -->
			<!-- 	<view class="cancel-rule padding25 ">
					<view class="rule-name">取消规则</view>
					<view>预定成功后，9月27日18:00前可免费取消</view>
				</view> -->
				<view class="cancel-rule padding25 ">
					<view class="rule-name">入住说明</view>
					<view>订单确认后，请携带所有入住人的有效身份证，于{{startTime}}14:00后办理入住，{{orderInfo.lkTime}}12:00前退房，如需提前入住或延迟退房请联系商家。</view>
				</view>
			</view>
		</view>
		<view class="hotelCotent marin25">
			<view class="hotelTab padding25">
				<view class="hotel-ruzhu">
					费用信息
				</view>
				<view class="hotel-pay">
					<view class="pay-cont">
						在线支付<text class="pay-wt">￥{{orderInfo.money}}</text>
					</view>
					<view class="pay-name" @click="detailedPopup">费用明细 <fui-icon name="arrowright" :size="40" color="#35743D"></fui-icon>
					</view>
				</view>
			</view>

			<!-- 酒店信息-->
			<view class="hotelInfo" v-for="(item,index) in orderInfo.roomList" :key='index'>
				<view class="info-top">
					<view class="img-left">
						<image :src="baseOssUrl2 + orderInfo.headPhoto" mode=""></image>
					</view>
					<view class="name-right">
						<view class="right-title">
							<!-- 格林豪泰商务酒店 -->
							{{orderInfo.mname || ''}}
						</view>
						<view class="">
							<!-- 铁道游击队附近 -->
							距您直线{{distance(latitude,longitude,orderInfo.latitude,orderInfo.longitude)}}公里
						</view>
					</view>
				</view>
				<view class="info-bottom">
					<view class="bottom-left" @click="gotoBnt()">
						<image :src="baseOssUrl+'icon/ad-dw.png' " mode=""></image>
						地图/导航
					</view>
					<view class="bottom-left" @click="tellFdong(orderInfo.mphone)">
						<image class="lf-img1" :src="baseOssUrl+'icon/pone.png' " mode=""></image>
						联系商家
					</view>
				</view>
			</view>
			<!-- end -->

			<!-- 房间信息 -->
			<view class="houseInfo" style="">
				<!-- 日期展示 -->
				<view class="time-flex">
					<!-- 日期选择 -->
					<view class="flex-ruzhu">
						<view class="ruzhu-time">
							{{startTime}}
							<view class="ruzhu-week">
								<!-- 周一 -->
								{{getWeekDate(startT)}}
							</view>
						</view>

						<!-- 共一晚 -->
						<view class="all-time">
							共{{numHou}}晚
						</view>

						<view class="lidian-time">
							<!-- 8月30日 -->
							{{orderInfo.lkTime}}
							<view class="lidian-week">
								<!-- 周三 -->
								{{getWeekDate(endT)}}
							</view>
						</view>
					</view>
					<view class="time-shij">
						<text>14:00后</text>
						<text>12:00前</text>
					</view>
				</view>
				<!-- 特价双床房 -->
				<view class="house-cont" v-for="(itema,index) in orderInfo.roomList" :key='index'>
					<view class="house-info">
						<view class="info-left">
							<!-- 特价双床房 1间 去掉-->
							{{itema.name || ''}}
						</view>
						<!-- <view class="info-right">
							查看房型
							<fui-icon name="arrowright" :size="30" color="#35743D"></fui-icon>
						</view> -->
					</view>
					<view class="house-biao">
						<!-- 双床｜36-48m²｜可2人入住 -->
						{{itema.bedNum || ''}}
						{{itema.roomArea || ''}}
						<text v-if="itema.livableUser">可{{itema.livableUser}}人入住</text>
					</view>
				</view>
				<fui-input labelColor='#7E7E7D' :padding="inputStyle" :labelSize="28" textRight label="入住人">{{orderInfo.zname}}
				</fui-input>
				<fui-input labelColor='#7E7E7D' :padding="inputStyle" :labelSize="28" textRight label="联系手机">{{orderInfo.phone}}
				</fui-input>
				<fui-input labelColor='#7E7E7D' :padding="inputStyle" :labelSize="28" textRight label="预计到店">{{orderInfo.yjddTime}}之前，如需提前到店请联
					商家（不影响酒店留房）
				</fui-input>
			</view>

			<!-- 订单信息 -->
			<view class="hotelOrder ">
				<view class="hotel-order">
					订单信息
				</view>
				<fui-input labelColor='#7E7E7D' :padding="inputStyle" :labelSize="28" textRight label="订单号">{{orderInfo.number}}
				</fui-input>
				<fui-input labelColor='#7E7E7D' :padding="inputStyle" :labelSize="28" textRight label="下单时间">{{orderInfo.cjTime}}
				</fui-input>
			</view>
			<!-- 服务保障 -->
		<!-- 	<view class="hotelService padding25" @click="goService">
				<view class="">
					服务保障
				</view>
				<fui-icon name="arrowright" :size="40"></fui-icon>
			</view> -->

		</view>
		<!-- 价格明细 start-->
		<bottom-popup ref="pricepopup" titleName='价格明细'>
			<template slot="cont">
				<view class="price-details">
					<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y">
						<view class="house-rent">
							房费
						</view>
						<view class="rent-cont">
							<!-- v-for="(ydItem,index) in ydTimeList"  :key='index'-->
							<view class="cont-house">
								<view class="">
									{{startTime}} - {{orderInfo.lkTime}}
									<!-- <text class="breakfast">无早餐</text> -->
								</view>
								<view class="">
									<!-- {{houeseText}} x ￥{{price}} -->
									{{numYdfrom}}x¥{{orderInfo.price}}
								</view>
							</view>
						</view>
						<view class="price-all">
							<text class="house-rent">总价</text>
							<!-- <text class="rent-all">¥{{priceA}}</text> -->
							<text class="rent-all">¥{{orderInfo.money}}</text>
						</view>
					</scroll-view>
				</view>

				<view class="lookBook">
					在线支付
					<text class="rent-all">¥{{orderInfo.money}}</text>
				</view>
			</template>
		</bottom-popup>
		<!-- 删除 -->

	</view>
</template>

<script>
	import {
		baseOssUrl,
		baseOssUrl2
	} from '@/common/settings';
	import {
		getPreStrDate
	} from '@/common/common.js';
	import pickerChange from '@/components/component/pickerChange.vue'
	import BottomPopup from '@/components/component/bottomPopup.vue'

	import {
		mapState,
		mapMutations
	} from 'vuex';

	export default {
		components: {
			pickerChange,
			BottomPopup,
		},
		// computed: mapState(['userId']),
		computed: {

		},
		data() {
			return {
				baseOssUrl: baseOssUrl,
				baseOssUrl2: baseOssUrl2,
				inputStyle: ['28rpx', '0rpx', '28rpx', '0rpx'],
				// houseShow: false, 
				houeseText: 0,
				hotelTitle: '',
				phone: '',
				userId: '',
				price: '',
				priceA: '',
				ydTimeList: [],
				isNo: 'noPay',
				orderId: '', //订单id
				orderInfo: {},
				startTime: '',
				endTime: '',
				numHou: '', //几晚
				startT: '',
				endT: '',
				latitude: '', //经度
				longitude: '', //维度
				numYdfrom:'',
				deleteShow: false,
				descr: '删除后将无法恢复和评价订单，确认删除么？',
				buttons: [{
					//按钮文本，必选
					text: '取消',
					//按钮文本颜色，可选
					color: '#1D1D1D',
					background: '#35743D',
					//是否为镂空按钮，即背景色为透明，可选
					plain: true
				}, {
					//按钮文本，必选
					text: '确定',
					//按钮文本颜色，可选
					color: '#fff',
					//按钮背景颜色，可选
					background: '#35743D',
					//是否为镂空按钮，即背景色为透明，可选
					plain: false
				}]
			}
		},
		onLoad(op) {
			console.log("op", op)
			this.isNo = op.isNo
			this.orderId = op.orderId
		},
		created() {},
		onShow() {
			this.userId = uni.getStorageSync("yc_m_userId")
			this.selectOrder()
			this.longitude = uni.getStorageSync('longitude')
			this.latitude = uni.getStorageSync('latitude')
		},
		onPullDownRefresh() {
			console.log('开始');
			setTimeout(function() {
				console.info('请求结束')
				uni.stopPullDownRefresh();
			}, 1000);

		},

		methods: {
			// id:317
			gotoBnt() {
				console.log('进入导航')
				//  经纬度暂时写死，后面介入数据
				let latitude =  Number(this.orderInfo.latitude);
				let longitude = Number(this.orderInfo.longitude);
				let address=this.orderInfo.address
				// 获取定位信息
				uni.getLocation({
					type: 'wgs84', //返回可以用于uni.openLocation的经纬度
					// 用户允许获取定位
					success: function(res) {
						console.log(res, '经纬度===>')
						if (res.errMsg == "getLocation:ok") {
							console.log(latitude)
							console.log(longitude)
							uni.openLocation({
								// 传入你要去的纬度
								latitude: latitude,
								// 传入你要去的经度
								longitude: longitude,
								// 传入你要去的地址信息 不填则为空
								address: address,
								// 缩放大小
								scale: 18,
								success: function() {
									console.log('成功的回调success');
								}
							});
						}
					},
					// 用户拒绝获取定位后 再次点击触发
					fail: function(res) {
						console.log(res)
						if (res.errMsg == "getLocation:fail auth deny") {
							uni.showModal({
								content: '检测到您没打开获取信息功能权限，是否去设置打开？',
								confirmText: "确认",
								cancelText: '取消',
								success: (res) => {
									if (res.confirm) {
										uni.openSetting({
											success: (res) => {
												console.log('确定');
											}
										})
									} else {
										console.log('取消');
										return false;
									}
								}
							})
						}
					}
				});
			},
			// 详情
			selectOrder() {
				console.log("idd", this.orderId)
				this.$http.get(this.$httpApi.selectOrderDetailed, {
					data: {
						// id: 320,
						id: this.orderId, 
					}
				}).then(res => {
					if (res.code == 0) {
						this.orderInfo = res.order
						this.statime = ''
						this.startT = res.order.ydTime.split(',')[0]
						var arrss = res.order.ydTime.split(',')
						this.endT = arrss[arrss.length-1]
						let date = this.startT.split('-')
						let dateEnd = this.orderInfo.lkTime.split('-')
						this.startTime = date[1] + '月' + date[2] + '日'
						this.orderInfo.lkTime = dateEnd[1] + '月' + dateEnd[2] + '日'
						this.endTime = dateEnd[1] + '月' + dateEnd[2] + '日'
						this.numHou = this.getDiffDay(this.startT, this.endT)
						// this.nameState = 
						this.numYdfrom= this.orderInfo.ydTime.split(',').length-1
						console.log(this.orderInfo.ydTime.split(',').length,'什么洗是撒旦爱思')
						console.log("info", this.getDiffDay(this.startT, this.endT))
					}
				})
			},
			// 获取星期
			getWeekDate(date) {
				let tm = date
				let dt = new Date(tm.replace(/-/g,'/'))
				var day = new Date(dt).getDay();
				var weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
				return weeks[day];
			},
			// 计算两个日期之间的差值
			getDiffDay(date_1, date_2) {
				let totalDays, diffDate
				let tm1 = date_1
				let dt1 = new Date(tm1.replace(/-/g,'/'))
				let tm2 = date_2
				let dt2 = new Date(tm2.replace(/-/g,'/'))
				let myDate_1 = Date.parse(dt1)
				let myDate_2 = Date.parse(dt2)
				// 将两个日期都转换为毫秒格式，然后做差
				diffDate = Math.abs(myDate_1 - myDate_2) // 取相差毫秒数的绝对值
			
				totalDays = Math.floor(diffDate / (1000 * 3600 * 24)) // 向下取整
			
				return totalDays // 相差的天数
			},
			leftClick() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 经纬度距离
			distance: function(la1, lo1, la2, lo2) {
				var La1 = la1 * Math.PI / 180.0;
				var La2 = la2 * Math.PI / 180.0;
				var La3 = La1 - La2;
				var Lb3 = lo1 * Math.PI / 180.0 - lo2 * Math.PI / 180.0;
				var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(La3 / 2), 2) + Math.cos(La1) * Math.cos(La2) * Math.pow(Math.sin(
					Lb3 / 2), 2)));
				s = s * 6378.137;
				s = Math.round(s * 10000) / 10000;
				s = s.toFixed(2);
				return s;
			},
			// 明细弹窗
			detailedPopup() {
				this.$refs.pricepopup._show();
			},
			//确认删除
			deleteShowModal() {
				this.deleteShow = true;
			},
			//模态框按钮点击事件
			deleteOnClick(e) {
				console.log('e删除', e)
				//...
				this.deleteOnCancel()
			},
			//关闭模态框
			deleteOnCancel(e) {
				this.deleteShow = false
			},
			// end
			// 取消订单
			cancelPage() {
				uni.showModal({
					title: '提示',
					content: '确定申请退款吗',
					success:  (res)=> {
						if (res.confirm) {
							this.$http.post(this.$httpApi.ordersqtk, {
								data: {
									// id: 320,
									id: this.orderId, 
								}
							}).then(res => {
								uni.showToast({
									title: '提交申请成功！',
									duration: 2000
								});
								setTimeout(res=>{
									uni.navigateBack(-1)
								},1000)
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 预订凭证
			goBookVoucher() {
				uni.navigateTo({
					url: '/pages/bookingVoucher/index'
				})
			},
			againPay(payNumber){ 
				 	this.$http.post(this.$httpApi.ordeWxPay + "?userId=" + this.userId + "&number=" + payNumber).then(res => {
				 		if (res.code == 0) {
				 			uni.requestPayment({
				 				provider: 'wxpay',
				 				timeStamp: res.response.timeStamp,
				 				nonceStr: res.response.nonceStr,
				 				package: 'prepay_id=' + res.response.prepayId,
				 				signType: 'MD5',
				 				paySign: res.response.paySign,
				 				success: re => {
				 					console.log("baocunid",res,re)
				 					uni.navigateTo({
				 						url: "/pages/paySuccess/index?orderId="+res.orderId
				 					})
				 					console.log('success:' + JSON.stringify(res));
				 				},
				 				fail: err => {
				 					uni.navigateTo({
				 						url: "/pages/hotelOrderDetails/index?isNo=noPay"+'&orderId='+res.orderId
				 					})
				 					console.log('fail:' + JSON.stringify(err));
				 				}
				 			});
				 		}
				 	})
				 
			},
			// 退款进度页面
			goTui(){
				uni.navigateTo({
					url: '/pages/refundProgress/index?id=' + this.orderId
				})
			},
			// 服务保障
			goService() {
				uni.navigateTo({
					url: '/pages/ServiceBz/index'
				})
			},
			// 联系商家
			tellFdong(phone) {
				console.log("phone", phone)
				uni.makePhoneCall({
					phoneNumber: phone //仅为示例
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.hotelAll {
		height: 100%;

		/deep/.fui-nav__left {
			width: 100% !important;
		}

		.order-title {
			color: #FFFFFF;
		}

		// 头部背景内容
		.imgAll {
			.kong {
				padding-bottom: 80rpx;
				background: #35743D;

				.img-head {
					padding-top: 30%;
					color: #fff;
					font-size: 28rpx;

					.wait-queren {
						margin-left: 16rpx;
						font-size: 38rpx;

					}

					.wait-queren1 {
						font-size: 38rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.w-q1 {
							display: flex;
							align-items: center;

							text {
								margin-left: 10rpx;
							}
						}

						.wait-shi {
							font-size: 32rpx;
						}

						.wait-shi1 {
							display: flex;
							align-items: center;
							font-size: 28rpx;
							font-weight: 400;
						}
					}

					.wait-text {
						margin-top: 12rpx;
					}

				}

				// 按钮组
				.btn-state {
					margin: 48rpx 24rpx;
					display: flex;
					align-items: center;
					justify-content: flex-end;

				}

				.one-btnstate {
					margin: 48rpx 24rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}

				.two-btnstate {
					margin: 48rpx 0rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}

				.cancel-rule {
					color: #FFFFFF;
					font-size: 24rpx;
					margin: 0rpx 24rpx 14rpx;
					display: flex;
					line-height: 40rpx;

					.rule-name {
						padding-right: 24rpx;
						flex-shrink: 0;
					}

					.rule-name2 {
						width: 80%;
					}

				}

			}

		}


		.hotelCotent {
			padding-bottom: 100rpx;

			.hotelTab {
				background: #FFFFFF;
				border-radius: 16rpx;
				margin-top: -55rpx;
				position: relative;
				z-index: 99;
				// box-shadow: -5px 8px 18px 1px rgba(0, 0, 0, 0.1);

				margin-bottom: 26rpx;
				color: #2E2E2E;

				.hotel-ruzhu {
					font-size: 30rpx;
					font-weight: bold;
					padding: 24rpx 0;
				}

				.hotel-pay {
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-top: 1px solid #E3E3E3;
					padding: 24rpx 0;

					.pay-cont {
						color: #7E7E7D;
						font-size: 28rpx;

						.pay-wt {
							color: #D93C3C;
							font-size: 32rpx;
							margin-left: 10rpx;
							font-weight: bold;
						}
					}

					.pay-name {
						color: #35743D;
						display: flex;
						align-items: center;
					}
				}

			}

			// 酒店信息
			.hotelInfo {
				background: #FFFFFF;
				border-radius: 16rpx;
				margin-top: 24rpx;
				padding: 24rpx;

				.info-top {
					display: flex;

					.img-left {
						width: 26%;
						flex-shrink: 0;

						image {
							width: 100%;
							height: 180rpx;
						}
					}

					.name-right {
						width: 74%;
						margin: 12rpx 0 0 12px;
						font-size: 28rpx;
						color: #585858;

						.right-title {
							color: #1D1D1D;
							font-size: 30rpx;
							font-weight: bold;
							margin-bottom: 16rpx;
						}
					}
				}

				.info-bottom {
					margin-top: 24rpx;
					font-size: 28rpx;
					display: flex;
					justify-content: space-between;

					.bottom-left {
						width: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						border-right: 1px solid #E3E3E3;

						&:last-child {
							border-right: 0;
						}

						image {
							width: 35rpx;
							height: 30rpx;
							margin-right: 10rpx;
						}

						.lf-img1 {
							width: 30rpx;
							height: 30rpx;

						}
					}
				}
			}

			.time-flex {
				border-bottom: 1px solid #B4B4B4;
				padding-bottom: 24rpx;

				// 时间展示
				.flex-ruzhu {
					color: #393939;
					display: flex;
					justify-content: center;
					align-items: center;
					// padding: 24rpx 0;
					color: #2E2E2E;
					font-size: 28rpx;

					.ruzhu-time {
						display: flex;
						align-items: center;
						line-height: 60rpx;
						margin-right: 8rpx;
						font-weight: bold;

						.ruzhu-week {
							margin-left: 8rpx;
							font-size: 22rpx;
							color: #2E2E2E;
							font-weight: 400;
						}
					}

					.all-time {
						font-size: 20rpx;
						color: #2E2E2E;
						margin: 0 14rpx;
						padding: 10rpx;
						border: 1px solid #B4B4B4;
						border-radius: 22rpx;
					}

					.lidian-text {
						font-size: 20rpx;
						line-height: 28rpx;
					}

					.lidian-time {
						color: #2E2E2E;
						font-size: 28rpx;
						display: flex;
						align-items: center;
						line-height: 60rpx;
						font-weight: bold;

						.lidian-week {
							margin-left: 8rpx;
							font-size: 22rpx;
							color: #2E2E2E;
							font-weight: 400;
						}
					}

				}

				.time-shij {
					color: #585858;
					font-size: 26rpx;
					display: flex;
					justify-content: center;

					text {
						&:first-child {
							padding: 0 65rpx;
						}

						&:last-child {
							padding: 0 110rpx;
						}
					}
				}
			}

			.tiemA {
				display: flex;
				justify-content: space-between;
				padding: 0 40rpx;

				.ta-left {
					margin: 0 20rpx;
				}

				.ta-right {
					margin: 0 20rpx;
				}
			}

			// end
			.houseInfo {
				margin-top: 24rpx;
				background: white;
				border-radius: 16rpx;
				padding: 20rpx;

				.house-cont {
					border-bottom: 1rpx solid #E3E3E3;
					padding: 24rpx 0;

					.house-info {
						display: flex;
						justify-content: space-between;
						font-size: 28rpx;

						.info-left {
							font-weight: bold;
						}

						.info-right {
							font-size: 26rpx;
							color: #35743D;
						}
					}

					.house-biao {
						margin-top: 12rpx;
						font-size: 24rpx;
						color: #7E7E7D;
					}
				}

			}

			// 订单信息
			.hotelOrder {
				padding: 24rpx;
				margin-top: 24rpx;
				background: #FFFFFF;
				border-radius: 16rpx;

				.hotel-order {
					font-size: 28rpx;
					font-weight: bold;
				}

			}

			.hotelService {
				padding: 24rpx;
				margin-top: 24rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				font-size: 28rpx;
				font-weight: bold;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}



		}





		// 费用弹窗

		.price-details {
			// height: 100rpx;
			padding-left: 30rpx;
			padding-right: 30rpx;
			padding-bottom: 100rpx;
			color: #707070;
			font-size: 30rpx;

			.house-rent {
				font-weight: bold;
				color: #1D1D1D;
				margin: 30rpx 0 16rpx 0;
			}

			.rent-cont {
				.cont-house {
					display: flex;
					justify-content: space-between;

					.breakfast {
						margin-left: 15rpx;
					}
				}
			}

			.price-all {
				display: flex;
				justify-content: space-between;
				font-weight: bold;
				align-items: center;

				.rent-all {
					color: #D93C3C;
				}
			}

		}

		.lookBook {
			padding: 30rpx 10rpx 0;
			border-top: 1px solid #D0D0D0;
			text-align: right;
			font-size: 30rpx;
			font-weight: bold;

			.rent-all {
				color: #D93C3C;
				margin-left: 24rpx;
			}
		}


	}
</style>
